<template>
	<view class="container">
		<!-- 装饰元素 -->
		<view class="decor top-left"></view>
		<view class="decor bottom-right"></view>

		<view class="label">商家入驻</view>
		<view class="btn" @click="toDetail">
			<text>立即申请</text>
			<uv-icon name="arrow-rightward" color="#FFFFFF" size="18" bold="true"></uv-icon>
		</view>
		<view class="desc">提供全套开店服务</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				step: 1
			};
		},
		onShow() {
			const userInfo = uni.getStorageSync("wanlshop:user");
			if (!userInfo || !userInfo.token) {
				return;
			}
			this.loadData();
		},
		methods: {
			toDetail() {
				if (this.step == 1) {
					this.$wanlshop.to("/pages/enter/apply/apply");
				} else {
					this.$wanlshop.to("/pages/enter/progress/progress?step=" + this.step);
				}
			},
			async loadData() {
				await uni.request({
					url: '/wanlshop.shop/getJoinInfo',
					method: 'POST',
					data: {},
					success: (res) => {
						uni.hideLoading();
						this.step = res.res.data.step.step;
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '加载失败，请检查网络'
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
		/* 优化的渐变背景 */
		background: linear-gradient(135deg, #fff8f5 0%, #fff0ea 100%);
		/* 细腻纹理效果 */
		background-image:
			radial-gradient(rgba(254, 84, 0, 0.03) 1px, transparent 1px),
			radial-gradient(rgba(254, 84, 0, 0.03) 1px, transparent 1px);
		background-size: 40rpx 40rpx;
		background-position: 0 0, 20rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 15%;
		box-sizing: border-box;
		position: relative;
		overflow: hidden;

		.label {
			font-size: 80rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 40%;
			text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		}

		.btn {
			background: #fe5400;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50rpx;
			padding: 30rpx;
			width: 60%;
			box-shadow: 0 10rpx 30rpx rgba(254, 84, 0, 0.2);
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.98);
				box-shadow: 0 5rpx 15rpx rgba(254, 84, 0, 0.15);
			}

			text {
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				padding-right: 20rpx;
			}
		}

		.desc {
			font-size: 28rpx;
			color: #666;
			line-height: 1.5;
			margin-top: 40rpx;
			letter-spacing: 1rpx;
		}

		// 装饰元素
		.decor {
			position: absolute;
			width: 300rpx;
			height: 300rpx;
			border-radius: 50%;
			background: rgba(254, 84, 0, 0.03);
			z-index: 0;
		}

		.top-left {
			top: -100rpx;
			left: -100rpx;
		}

		.bottom-right {
			bottom: -120rpx;
			right: -120rpx;
		}
	}
</style>